@extends('backend::layout')

@section('title', '干预训练记录列表')

@section('content')
    <div class="card border-no">
        <div class="card-body">
                <div class="col-lg-12 col-sm-12 col-xs-12 chart">
                    <div class="info-box">
                        <canvas id="canvas"></canvas>
                    </div>
                </div>
        </div>
    </div>
@stop


@section('script')
    <script>


        function createConfig(labels, data, title) {
            return {
                type: 'horizontalBar',
                data: {
                   // labels: ['基础版', '进阶版', '高阶版'],
                    labels:labels,
                    datasets: data
                },
                options: {
                    responsive: true,
                    legend: {
                        position: 'right',
                    },
                    title: {
                        display: true,
                        text: title
                    },
                    maintainAspectRatio: false,
                    scales:{
                        yAxes:[{
                            ticks:{
                                stepSize:1,
                                //min:1,
                                beginAtZero:true
                            }
                        }]
                    }
                }
            };
        }

        window.onload = function () {
            $.get('{{route("admin.analysis.gettrainingdata",['type'=>$type])}}', function (data) {
                if (data.status == 200) {
                    var color = Chart.helpers.color;
                    var colorNames = Object.keys(window.chartColors);
                    console.log(data.data);
                    var result = data.data;
                    var colorNum = 0;
                    var data = [];
                    var thisdata = {};
                    var colorName = colorNames[colorNum % colorNames.length];
                    colorNum++;

                    thisdata.borderColor = window.chartColors[colorName];
                    thisdata.backgroundColor = color(window.chartColors[colorName]).alpha(0.5).rgbString();
                    thisdata.fill = false;
                    thisdata.label = "干预训练次数";
                    thisdata.data = result.y;

                    data.push(thisdata);

                    var thisconfig = createConfig(result.x, data, "干预训练次数");
                    console.log(thisconfig);
                    var num = thisdata.data.length;
                    console.log('num:' + num);

                    if(num > 6){
                        $("#canvas").css('height', num * 20);
                    }

                    var ctx = document.getElementById('canvas').getContext('2d');
                    //var chart = new Chart(ctx, thisconfig);
                    window.myBar = new Chart(ctx, thisconfig);
                }
            });
        };

    </script>
@stop